import React from 'react';
import {
    Form,
    Input,
    Button,
    Cascader,
    DatePicker,
    InputNumber,
    Switch
  } from 'antd';
import { InfoCircleOutlined } from '@ant-design/icons';

export default function User() {
    return (
        <div>
            <Form
                layout="horizontal"
            >
                <Form.Item label="Form Size" name="size">
                    <Input placeholder="请输入"/>
                </Form.Item>
                <Form.Item label="Field A" tooltip="This is a required field">
                    <Input placeholder="input placeholder" />
                </Form.Item>
                <Form.Item
                    label="Field B"
                    tooltip={{ title: 'Tooltip with customize icon', icon: <InfoCircleOutlined /> }}
                >
                    <Input placeholder="input placeholder" />
                </Form.Item>
                <Form.Item label="Cascader">
                    <Cascader
                        options={[
                        {
                            value: 'zhejiang',
                            label: 'Zhejiang',
                            children: [
                            {
                                value: 'hangzhou',
                                label: 'Hangzhou',
                            },
                            ],
                        },
                        ]}
                    />
                </Form.Item>
                <Form.Item label="DatePicker">
                    <DatePicker />
                    </Form.Item>
                    <Form.Item label="InputNumber">
                    <InputNumber />
                    </Form.Item>
                    <Form.Item label="Switch" valuePropName="checked">
                    <Switch />
                </Form.Item>
                <Form.Item>
                    <Button type="primary">Submit</Button>
                </Form.Item>
            </Form>
        </div>
    );
}
